/**
 * 商户维护
 * @constructor
 */
function Home() {
}

Home.init = function () {
    getShopFee();
    //欠费信息
    $('#tableList').bootstrapTable({
        url: '/home/tableSearch',
        method: 'post',
        striped : true, //是否显示行间隔色
        toolbar: "#toolbar",
        sidePagination: "true",
        dataField: "data",//这是返回的json数组的key.默认是"rows".这里只有前后端约定好就行
        showToggle : false, //是否显示详细视图和列表视图的切换按钮
        striped: true, // 是否显示行间隔色
        //search : "true",
        uniqueId: "id",
        pageList : [ 5, 10, 20,50,100],//可选择单页记录数
        pageSize: "5",
        pagination: true, // 是否分页
        sortable: false, // 是否启用排序
        sidePagination: 'server', // 设置为服务器端分页     客户端：client
        search:false,
        showColumns: false,
        showRefresh: false,
        showFooter:false,
        //得到查询的参数
        queryParams: function (params) {
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            var query_params = {
                //********table的参数 不变
                pageSize: params.limit,                         //页面大小
                pageIndex: (params.offset / params.limit) + 1,   //页码
                sort: params.sort,      //排序列名
                sortOrder: params.order, //排位命令（desc，asc）
                //********
                //获取查询的对象，往下加入
            };
            return query_params;
        },
        columns:[
            {
                //field: 'Number',//可不加
                title: '序号',//标题  可不加
                align: "center",
                width: 40,
                formatter: function (value, row, index) {
                    var pageSize=$('#tableList').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                    var pageNumber=$('#tableList').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                    return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                }
            },
            { field: 'shopName', title: '商户名称',align: 'center'},
            { field: 'feeYearMonth', title: '月份',align: 'center'},
            { field: 'amount', title: '总费用',align: 'center'},
            { field: 'dueAmount', title: '欠费金额',align: 'center'},
            { field: 'offDate', title: '执行自动断电日期',align: 'center'}
        ]
    });
    getEchartMap();
}
//获取本月情况****************************
function getShopFee() {

    $.ajax({
        url: "/home/getShopFee",
        type: "get",
        contentType: "application/json",
        dataType: "json",
        success: function (data) {
            $("#total").html(data.total);
            $("#feetotal").html(data.feetotal);
            $("#duetotal").html(data.duetotal);
        },
        error: function () {
            // alert("Error");
        }
    });

}
function getEchartMap()
{
    var postdata={};
    var myChart = echarts.init(document.getElementById('container'));
    $.ajax({
        url:"/home/getFeeMap",
        type:"post",
        data:JSON.stringify(postdata),
        contentType:"application/json",
        dataType:"json",
        async: false, // 同步
        success:function(data) {
            console.log("data.typenames:",data.typenames);
            console.log("data.shopnames:",data.shopnames);
            Maps(data,myChart);
        }
    });
}
function Maps(mapdata,myChart) {
    var option = {
        color: ['#4cabce','#e5323e','#003366'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: mapdata.typenames
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: mapdata.shopnames
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series:mapdata.series
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option, true); //如果不设置TRUE就不能动态加载图
    window.onresize = myChart.resize;


}
